<template>
    <div class="container">
        <el-row>
            <el-col :span="7">
                <el-input style="border-radius: 0 5px 5px 0; width:300px;" placeholder="请输入关键词" v-model="searchName1">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="handleSearch1">搜索</el-button>
                </el-input>
            </el-col>
            <el-button style="float:right; margin-right: 10px" @click="download">模板下载</el-button>

            <el-upload
                class="upload-demo"
                ref="upload"
                :action="action"
                :on-change="uploadonchange"
                accept=".xlsx,.xls"
                :show-file-list='false'
                :auto-upload="false">
                <el-button slot="trigger" size="small">导入模板</el-button>
            </el-upload>
            <el-button type="primary" @click='gogongyi' v-if="!added" style="float:right; margin-right: 10px">添加工艺</el-button>
        </el-row>
        <el-table
            :data="tableData"
            border09
            ref="multipleTable"
            header-cell-class-name="table-header"
            style="margin-top:20px;"
        >
            <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
            <el-table-column prop="productName" sortable label="品名"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        v-if="!edit"
                        @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        v-if="!del"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"  @current-change="handleCurrentChange" :total="total" style="margin-top:20px"></el-pagination>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
    </div>
</template>
<script>
import BigImg from '../../../common/BigImg.vue';
    import {technology_findByList,technology_delete} from '@/request/api'
    export default {
        components: { 'big-img':BigImg},
        data() {
            return {
                imgSrc:'',
                showImg:false,
                total:0,
                currentPage:1,
                pagesize:10,
                searchName1: '',
                activeName: '中药饮片',
                tableData: [],
                boxCode:'',
                action:'',
                added:true,
                edit:true,
                del:true
            };
        },
         created(){
           
        },
        mounted(){
            this.init();
            // this.init1()
            this.judgmentAuthority();
        },
        methods: {
            gogongyi(){
                this.$router.push({
                    path:'processlist/added',
                    // query:{name:this.activeName}
                })
            },
            download(){
                //  window.location.href = "http://" + window.location.host + "/muban.xlsx";
                // window.location.href = "http://47.104.241.124:8901/工艺模版导入.xls";
            },
            handlecheck(index,row){
                // console.log()
                this.showImg = true;
　　　　　　    // 获取当前图片地址
　　　　　　    this.imgSrc = this.$store.state.imageUrls + row.standards;
            
            },
            viewImg(){
                this.showImg = false;
            },
            init(){
                let data = {
                    page:this.currentPage
                }
                technology_findByList(data).then((res)=>{
                        this.total = res.total
                    this.tableData = res.rows
                })
            },
           
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
           
            handleClick(){
                console.log(this.activeName)
            },
            // 调用接口
            getcase(){
              
            },
            handleEdit(index,row){
                this.$router.push({
                    path:'/processlist/edit',
                    query:{
                        id:row.id
                    }
                })
            },
            //删除
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    technology_delete(row.id).then((res)=>{
                        // this.tableData.splice(row,1)
                        
                        this.$notify({
                            title: '操作成功',
                            message: '删除成功',
                            type: 'success'
                        });
                        this.init()
                    }) 
                });
            },
            uploadonchange(file) {
                // let formData = new FormData();
                // formData.append('file', file.raw);
                // let config = {
                //     headers:{'Content-Type':'multipart/form-data'}
                // };
                // process_daoru(formData).then((res) =>{
                //     if (res.code == 200) {
                //         this.$notify({
                //             title: '操作成功',
                //             message: '导入成功',
                //             type: 'success'
                //         });
                //         this.init()
                //     } else{
                //         this.$notify.error({
                //             title: '操作失败',
                //             message: '导入失败',
                //             type: 'error'
                //         });
                //     }
                // })
            },
            handleSearch1() {
                this.currentPage = 1
                this.init()
            },

            //判定操作按钮显示
            judgmentAuthority() {
                var type = JSON.parse(localStorage.getItem('userInfo')).appMenus;
                type.map((item) => {
                    if (item.appName == '种植平台') {
                        item.menus.map((item1) => {
                            if (item1.children != null) {
                                for (var i = 0; i < item1.children.length; i++) {
                                    if (item1.children[i].name == '新增') this.added = false;
                                    if (item1.children[i].name == '编辑') this.edit = false;
                                    if (item1.children[i].name == '删除') this.del = false;
                                }
                            }
                        });
                    }
                });
            }
          
        }
    }
</script>

<style>


    .upload-demo .el-upload--text{
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    float: right;
    margin-right: 10px
}
.scopClass .el-table{ margin-top: 20px;}
.scopClass .el-pagination{
    text-align: center;
}
/* .el-row{ margin-bottom: 20px;} */
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom:0;
}
</style>